<template>
  <div class="container">
    <div class="header">
      <div class="left">
        <el-select v-model="queryParams.jingquName" class="select" style="width: 50%">
          <template #prefix>
            <div class="select-prefix">景区名称：</div>
          </template>
          <el-option v-for="item in TypeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-time-picker is-range v-model="dateRange" arrow-control format="HH:mm" value-format="HH:mm" range-separator="至"
          start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
        </el-time-picker>
      </div>
      <div class="right">
        <el-button class="query" @click="getPiaoList">查询</el-button>
        <el-button plain class="clear" @click="clearAll">清空</el-button>
      </div>
    </div>
    <div class="content">
      <div class="table-header">
        <span class="left">列表</span>
        <div class="right">
          <el-button type="primary" icon="el-icon-plus" class="add" @click="onAddSpot"
            v-hasPermi="['publicService:tickets:add']">新增</el-button>
          <el-button type="primary" icon="el-icon-download" class="export" @click="exportExcel" :loading="exportLoading"
            v-hasPermi="['publicService:tickets:export']">导出</el-button>
          <el-button icon="el-icon-refresh-right" class="refresh" @click="getPiaoList">刷新</el-button>
        </div>
      </div>

      <el-table :data="piaoList" :header-cell-style="headerCellStyle" style="width: 100%" :loading="tableLoading">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="jingquName" label="景区名称" align="center" />
        <el-table-column label="门票种类" align="center">
          <template slot-scope="scope">
            {{ scope.row.categoryNum ? scope.row.categoryNum : '暂无' }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <el-table-column prop="updateBy" label="修改人" align="center" />
        <el-table-column prop="updateTime" label="修改时间" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleSee(scope.row, 0)" style="margin-right: 4px"
              v-hasPermi="['publicService:tickets:query']">查看</el-link>
            <el-link type="primary" style="margin-right: 4px" @click="handleSee(scope.row, 1)"
              v-hasPermi="['publicService:tickets:edit']">编辑</el-link>
            <el-link type="danger" style="margin-right: 4px" @click="handleDelete(scope.row)"
              v-hasPermi="['publicService:tickets:delete']">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getPiaoList" />
      </div>
    </div>
    <see-info :isShowDia="isSee" @closeSeeDia="closeSeeDiaFun" :seeDiaInfo="seeInfo" />
  </div>
</template>

<script>
import SeeInfo from "./comp/SeeInfo.vue";
import {
  jingQuPageApi, // 景区分页
  stopOrderApi, // 停止预约,
  jingquExportApi, // 导出景区
  getJingDianByJingQuIdApi, // 通过id获取景区中的景点
  delJingQuApi, // 删除景区
  jingQuListApi, // 获取所有景区列表
} from "@/api/YApi/scenicSpot";

import {
  piaoListApi, // 列表
  piaoInfoApi, // 获取详细信息
} from "@/api/YApi/tickets";
export default {
  components: { SeeInfo },
  data() {
    return {
      piaoList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startTime: null,
        endTime: null,
        jingquName: null,
      },

      seeInfo: {},
      isSee: false,
      tableLoading: false,
      exportLoading: false,
      total: 0,
      dateRange: '',

      // 新增
      isShowAdd: false,

      TypeList: [],
      searchText: "",
      currentPage: 1,
    };
  },
  computed: {
    headerCellStyle() {
      return {
        "font-size": "16px",
        "font-weight": 400,
        color: "#999999",
        background: "#fff",
      };
    },
  },
  methods: {
    // 初始化
    init() {
      this.getJingQuList();
      this.getPiaoList();
    },

    // 获取门票列表
    getPiaoList() {
      this.tableLoading = true;
      const params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        startTime: this.dateRange ? this.dateRange[0] : null,
        endTime: this.dateRange ? this.dateRange[1] : null,
        jingquName: this.queryParams.jingquName
      }

      console.log(params)
      piaoListApi(params)
        .then((res) => {
          if (res.code === 200) {
            this.piaoList = res.rows;
            this.total = res.total;
          } else {
            this.piaoList = [];
            this.total = 0;
          }
          this.tableLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.piaoList = [];
          this.total = 0;
          this.tableLoading = false;
        });
    },

    // 获取所有景区
    getJingQuList() {
      jingQuListApi()
        .then((res) => {
          if (res.code === 200) {
            this.TypeList = res.data.map((v) => {
              return {
                label: v.jingquName,
                value: v.jingquName
              };
            });
          } else {
            this.TypeList = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.TypeList = [];
        });
    },

    // 清空
    clearAll() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        startTime: null,
        endTime: null,
        jingquName: null,
      };
      this.dateRange = "";
      this.getPiaoList();
    },

    // 关闭查看
    closeSeeDiaFun() {
      this.isSee = false;
      this.seeInfo = {};
    },
    // 查看
    handleSee(row, type) {
      piaoInfoApi(row.jingquId)
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.seeInfo = res.data;
            console.log(this.seeInfo)
            if (type == 0) {
              if(!this.seeInfo.menPiaoCategorys.length && !this.seeInfo.menPiaoTimes.length) {
                this.msgInfo('暂无门票信息')
                return;
              }
              // 查看
              this.isSee = true;
            } else {
              // 编辑
              this.$router.push({
                path: "/publicService/tickets/edit",
                query: {
                  action: "edit",
                  row: JSON.stringify(this.seeInfo),
                },
              });
            }
          } else {
            this.seeInfo = null;
          }
        })
        .catch((err) => {
          console.log(err);
          this.seeInfo = null;
        });
    },
    // 删除
    handleDelete(row) {
      const id = row.jingquId;
      this.$confirm("是否确认删除该景区的数据?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delJingQuApi(id);
        })
        .then((res) => {
          if (res.code === 200) {
            this.getPiaoList();
            this.msgSuccess("删除成功");
          } else {
            this.msgError("删除失败");
          }
        })
        .catch((err) => {
          console.log(err);
          this.msgError("删除失败");
        });
    },
    // 停止预约
    stopRoder(row) {
      const jingquId = row.jingquId;
      stopOrderApi(jingquId)
        .then((res) => {
          this.getPiaoList();
        })
        .catch((err) => {
          this.getPiaoList();
        });
    },

    // 导出景区
    exportExcel() {
      this.exportLoading = true;
      let { startTime, endTime, status } = { ...this.queryParams };
      jingquExportApi({ startTime, endTime, status })
        .then((res) => {
          if (res.code === 200 && res.data) {
            const link = document.createElement("a");
            link.href = res.data;
            link.download = "file-name.ext";
            link.click();
          }
          this.exportLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.exportLoading = false;
        });
    },

    // 新增景区
    onAddSpot() {
      this.$router.push({
        path: "/publicService/tickets/action",
        query: {
          action: "add",
        },
      });
    },

    handleSizeChange() { },
    handleCurrentChange() { },
  },
  mounted() {

    this.init();
  },
};
</script>
<style scoped lang="scss">
.container {
  height: 100%;
  width: 100%;
  background-color: var(--theme_bg_color);
  display: flex;
  flex-direction: column;

  .header {
    height: 80px;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    padding: 24px;
    margin-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .select {
        height: 32px;
        margin-right: 16px;

        ::v-deep .el-input--prefix .el-input__inner {
          padding-left: 81px;
        }
      }

      .select-prefix {
        font-size: 14px;
        font-weight: 400;
        color: #8f959e;
        line-height: 36px;
      }

      .search {
        height: 32px;
        width: 338px;
      }
    }

    .right {
      display: flex;
      align-items: center;

      .query {
        width: 72px;
        height: 32px;
        border: 1px solid #3370ff;
        color: #3370ff;
      }

      .clear {
        width: 72px;
        height: 32px;
      }
    }
  }

  .content {
    flex: 1;
    background: var(--nav_bg_color);

    .table-header {
      padding: 21px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e4e7ed;
      background-color: #ffffff;

      .left {
        font-size: 16px;
        font-weight: 400;
        color: #111111;
      }

      .right {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .add {
          background: #3370ff;
          border: none;
        }

        .export {
          background: #79cf1c;
          border: none;
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      background-color: #ffffff;
    }

    .edit {
      margin: 0 20px;
    }

    .tag {
      width: 60px;
      height: 24px;
      border-radius: 2px 2px 2px 2px;
      font-size: 14px;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;

      i {
        margin-right: 5px;
      }
    }

    .business {
      background: #d6e2ff;
      color: #245bdb;
    }
  }
}
</style>
